<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!--bootstrap-table表格引入-->
    <script src="/js/bootstrap-table/dist/bootstrap-table.js"></script>
    <script src="/js/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
    <link href="/js/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet">
    <!--        Toastr提示信息5-->
    <script src="/js/toastr/toastr.min.js"></script>
    <link href="/js/toastr/toastr.css" rel="stylesheet">
    <!--bootstrap-dialog模态框，一般用于增加修改弹出一个窗口-->
    <script src="/js/bootstrap-dialog/dist/js/bootstrap-dialog.js"></script>
    <link href="/js/bootstrap-dialog/dist/css/bootstrap-dialog.css" rel="stylesheet">
    
</head>
<body>
<div id="toolbar">
    <form>
        <button type="button" class="btn btn-info" onclick="getData()">提交</button>
        <button type="button" onclick="addbook()"  class="btn btn-primary">增加</button>
        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
    </form>
</div>
<table id="table"></table>
<script>

    $('#table').bootstrapTable({
        url: '/brand/getall',
        method: 'GET',                      //请求方式（*）
        // toolbar: '#toolbar',              //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
        pageSize: 4,                     //每页的记录行数（*）
        pageList: [3,4,5],        //可供选择的每页的行数（*）
        showColumns: true,                  //是否显示所有的列（选择显示的列）
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 1,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        height: 400,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "rid",                     //每一行的唯一标识，一般为主键列
        //得到查询的参数
        queryParams : function (params) {
            //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            var temp = {
                pagesize: params.limit,                         //页面大小
                pagenum: (params.offset / params.limit) + 1,   //页码

            };
            return temp;
        },
        columns: [{
            checkbox: true,
            visible: true                  //是否显示复选框
        }, {
            field: 'id',
            title: 'id',
        }, {
            field: 'name',
            title: '品牌名称',
        }, {
            field: 'firstChar',
            title: '标志',
        },{
            field:'id',
            title: '操作',
            width: 120,
            align: 'center',
            valign: 'middle',
            formatter:  function actionFormatter(value, row, index) {
                var id = value;
                var result = "";
                result += "<a href='javascript: updatebook("+id+") ;' class='btn btn-xs blue'  title='编辑'> <span class='glyphicon glyphicon-pencil'></span> </a>";
                result += "<a href='javascript: deletebook("+id+") ;' class='btn btn-xs red' title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
                return result;
            }
        }, ]
    });





    //增加书籍信息
    function addbook() {
        BootstrapDialog.show({
            title: '增加',
            message: $('<div></div>').load("/brand/addtiao"),//增加跳转页面
            closeable: true,
            buttons: [{
                label: '增加',
                action: function (dialog) {
                    // alert($("#fmid").serialize())
                    //增加逻辑代码
                    $.getJSON("/brand/addbrand",$("#fmid").serialize(),function (d){

                        if(d==1){
                            toastr.success("增加成功")
                            dialog.close();
                            getData();//刷新页面
                        }else{
                            toastr.error("增加失败")
                        }
                    },"text")
                }
            }, {
                label: '关闭',
                action: function (dialog) {
                    dialog.close();
                }
            }]
        });
    }


    //修改书籍信息
    function updatebook(id){
        // alert(id)
        BootstrapDialog.show({
            title: '修改',
            message: $('<div></div>').load("/brand/updatetiao?id="+id),//增加跳转页面
            closeable: true,
            buttons: [{
                label: '修改',
                action: function (dialog) {

                    //增加逻辑代码
                    // alert($("#fmids").serialize())
                    $.getJSON("/brand/updatebrand",$("#fmids").serialize(),function (d){
                        if(d=1){
                            toastr.success("修改成功")
                            dialog.close();
                            getData();//刷新页面
                        }else{
                            toastr.error("修改失败")
                        }
                    },"text")
                }
            }, {
                label: '关闭',
                action: function (dialog) {
                    dialog.close();
                }
            }]
        });
    }


    //删除信息
    function deletebook(id){
        $.getJSON("/brand/deleteid","id="+id,function (d){
            if(d==1){
                toastr.success("删除成功")
                getData();
            }else{
                toastr.error("删除失败")
                getData();
            }
        })
    }

    //模糊查询刷新页面
    function getData(){
        $("#table").bootstrapTable("refresh")
    }

</script>








   
</body>
</html>